<template>
  <div>
    首页
    <el-button @click="btnclick"> 简单的excel导出</el-button>
    <el-button @click="but_fz">这是导出复杂的excel表单</el-button>
    <index2 />
    <!-- v-model 就相当于  @input="avatar = $event"   和  :value="avatar" -->
    <UploadImg v-model="avatar" />
    <erweima />
  </div>
</template>
<script>
/* 这里要导入这个插件方法 */
import { export_json_to_excel } from '@/vendor/Export2Excel'
import UploadImg from '@/components/lib/UploadImg.vue'
import erweima from './erweima.vue'
import index2 from './index2.vue'
export default {
  components: {
    index2,
    UploadImg,
    erweima
  },
  data() {
    return {
      // avatar: 'http://dhf81-1305249343.cos.ap-guangzhou.myqcloud.com/head.jpg'
      avatar: ''
    }
  },
  created() {
    this.fn({ age: 18 })
  },
  methods: {
    fn({ name = '张三' } = {}) {
      console.log(name)
    },
    btnclick() {
      export_json_to_excel({
        /* filename是导出excel的文件名 */
        filename: '导出简单的excel',
        /* header是导出excel的简单表头 有姓名 年龄  */
        header: ['姓名', '年龄'],
        /* data 是 excel列表数据*/
        data: [['张三', 18], ['李四', 20]]
      })
    },
    /* 这是导出复杂类型的excel表单 */
    but_fz() {
      /* 第一步导入插件方法 */
      export_json_to_excel({
        filename: '导出的复杂excel表单',
        /* 这里是复杂的表头 */
        multiHeader: [['员工列表', '', ''], ['员工必填信息', '', '备注']],
        header: ['姓名', '年龄', ''],
        data: [['张三', 18, '无'], ['李四', 20, '无']],
        /* 这里是根据你想合并的从什么什么地方到什么什么地方合并 */
        merges: ['A1:C1', 'A2:B2', 'C2:C3']
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  width: 300px;
  height: 300px;
  border: 5px dashed black;
}
</style>
